<template>
  <v-container class="py-8">
    <v-row justify="center">
      <v-col cols="12" lg="10">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
          <h1 class="text-h3 font-weight-bold mb-4">{{ $t('about.title') }}</h1>
          <v-divider class="mx-auto" style="max-width: 100px;"></v-divider>
        </div>

        <!-- 公司介绍 -->
        <v-card class="mb-6" elevation="2">
          <v-card-text class="pa-6">
            <h2 class="text-h5 font-weight-bold mb-4 primary--text">
              {{ $t('about.company.name') }}
              <span class="text-body-2 grey--text ml-2">({{ $t('about.company.englishName') }})</span>
            </h2>
            <p class="text-body-1 line-height-1-6">
              {{ $t('about.company.name') }}{{ $t('about.company.description') }}
            </p>
          </v-card-text>
        </v-card>

        <!-- 核心业务 -->
        <v-card class="mb-6" elevation="2">
          <v-card-text class="pa-6">
            <h3 class="text-h5 font-weight-bold mb-4 primary--text">
              <v-icon left color="primary">mdi-briefcase</v-icon>
              {{ $t('about.business.title') }}
            </h3>
            <p class="text-body-1 line-height-1-6">{{ $t('about.business.description') }}</p>
          </v-card-text>
        </v-card>

        <!-- 我们的优势 -->
        <v-card class="mb-6" elevation="2">
          <v-card-text class="pa-6">
            <h3 class="text-h5 font-weight-bold mb-4 primary--text">
              <v-icon left color="primary">mdi-star</v-icon>
              {{ $t('about.advantages.title') }}
            </h3>
            <p class="text-body-1 line-height-1-6">{{ $t('about.advantages.description') }}</p>
          </v-card-text>
        </v-card>

        <!-- 使命与愿景 -->
        <v-card elevation="2">
          <v-card-text class="pa-6">
            <h3 class="text-h5 font-weight-bold mb-4 primary--text">
              <v-icon left color="primary">mdi-target</v-icon>
              {{ $t('about.mission.title') }}
            </h3>
            <p class="text-body-1 line-height-1-6">{{ $t('about.mission.description') }}</p>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'AboutPage',
  head() {
    return {
      title: this.$t('about.title'),
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$t('about.company.description')
        }
      ]
    }
  }
}
</script>

<style scoped>
.line-height-1-6 {
  line-height: 1.6;
}

.v-card {
  transition: all 0.3s ease;
}

.v-card:hover {
  transform: translateY(-2px);
}
</style>